<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>有人智造-总装看板</title>
  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.js"></script>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
  <!--    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.esm.min.js"></script>-->
  <link rel="icon" href="/static/img/logo.png" type="image/x-icon"> <!-- 链接到favicon.ico文件 -->
</head>
<style>
  .table {
    border-collapse: collapse;
    width: 100%;
  }

  .table td, .table th {
    border: 1px solid white;
    padding: 8px;
  }

  .table th:nth-child(odd){
    background-color: #caf2ff;
  }
  .table tr:nth-child(even){
    background-color: #7bd4ce;
  }
  .main2{
    width: 45%;
    float: left;
  }
  .table th {
    background-color: #f2f2f2;
    position: sticky;
    top: 0;
    z-index: 1;
  }
  .span1{
    display: inline-block;
    width: 350px;
    height: 30px;
    line-height: 30px;
    text-align: center;
    background-color: #c8dafe;
    border-radius: 20px;
    font-size: 20px;
  }
  .container {
    max-width: 1600px;
    width: 100%;
    /*width: 1510px;*/
    /*margin: 0 auto;*/
    display: inline-block;
    /*background-color: red;*/
    height: 600px; /* 设置容器的高度 */
    overflow: auto; /* 启用垂直滚动 */
    padding:0;
    /*margin-left: 70px;*/
    overflow-y: hidden;
    overflow-x: hidden;
    position: relative; /* 相对定位以容纳滚动内容 */
    /*display: flex;*/
    /*float: left;*/

  }
  .container1{
    width: 100%;
    /*width: 1800px;*/
    /*background-color: #666aff;*/
    position: absolute; /* 绝对定位 */
    top: 0; /* 初始位置为顶部 */
    /*animation: move 5s linear infinite; !* 使用动画滚动 *!*/
    animation-name: move;
    /*animation-duration: 800s;*/
    animation-timing-function: linear;
    /*animation-delay: 1s;*/
    animation-iteration-count: infinite;
    animation-direction: alternate;
    animation-fill-mode: forwards;
  }
  /* 滚动动画 */
  @keyframes move {
    /*0% {*/
    /*    top: 0; !* 开始时回到顶部 *!*/
    /*}*/
    /*100% {*/
    /*    top: -100%; !* 结束时滚动到底部 *!*/
    /*}*/
    from {
      transform: translateY(0);
    }
    to {
      transform: translateY(-10%);
    }
  }
  .body{
    width: 100%;
    height: 1200px;
    /*background-color: #f5f7fa;*/
    font-size: 20px;
    background: linear-gradient(to bottom right, blue, pink);
    background-image: url("/static/img/017d6a5c513b9ca801213f26c6f65d.png@2o.png");
    background-size: cover;
  }
  h3{
    border-radius: 20px 20px 0 0;
    padding-left: 20px;
  }
  h1{
    width: 30%;
    margin: 0 auto;
    color: white;
    background: linear-gradient(-45deg, transparent 34px, #134194 0) right,
    linear-gradient(45deg, transparent 34px, #134194 0) left;
    background-size: 50% 100%;
    background-repeat: no-repeat;
    margin-bottom: 20px;
  }
  .return{
    position: fixed;
    top: 10px;
    left:10px;
    width: 50px;
    height: 50px;
  }

</style>
<body class="body">
<div class="main" style="width: 100%;margin:0 auto;" >
  <img src="/static/img/return.png" alt="返回总控台" class="return">
  <h1 style="text-align: center ">总装看板</h1>
  <div style="background-color: white;border-radius:25px 25px 0 0;margin-bottom: 50px">
    <h3 style="background-color: #134094;color:#f1faff;height: 50px;line-height: 50px;" >线体当前在制信息</h3>
    <table class="table table1" style="text-align: center;">
      <tr>
        <th>线体</th>
        <th>在制制令单号</th>
        <th>产品编码</th>
        <th>产品型号</th>
        <th>计划生产数量</th>
        <th>当前投入数量</th>
        <th>当前产出数量</th>
        <th>平均每小时产量</th>
        <th>制令单上线时间</th>
        <th>预计完工时间</th>
      </tr>
      <tbody id="table1">
      {volist name="$data" id="item" }

      <tr>
        <td>{$item['AREA_SN']}</td>
        <td>{$item['MO_DOC']}</td>
        <td>{$item['MODEL_CODE']}</td>
        <td>{$item['ITEM_SPEC']}</td>
        <td>{$item['PLAN_QTY']}</td>
        <td>{$item['INPUT_QTY']}</td>
        <td>{$item['OUTPUT_QTY']}</td>
        <td>{$item['AvgNum']}</td>
        <td>{$item['ONLINE_TIME']}</td>
        <td>{$item['PLAN_END_TIME']}</td>
      </tr>
      {/volist}
      <tbody>

    </table>
  </div>
  <div>
    <div>


    </div>
    <div class="main2 " style="margin-right: 50px;background-color: white;border-radius: 25px 25px 0 0;">
      <h3 style="background-color: #134094;color:#f1faff;display: inline-block;width: 100%; height: 50px;line-height: 50px;position: sticky;top: 0;z-index: 2;margin-bottom: -1px" >待生产制令单</h3>
      <!--            <table class="table table2" style="text-align: center">-->
      <table class="table" style="text-align: center;">
        <thead>
        <tr>
          <th width="50px">序号</th>
          <th width="240px">制令单号</th>
          <th width="230px">产品品名</th>
          <th width="270px">预计上线时间</th>
        </tr>
        </thead>
      </table>
      <div class="{if $data2['count']>=12}container{/if}">
        <div class="{if $data2['count']>=12}container1{/if}" style="animation-duration:{$data2['count']}s;">
          <table class="table"   style="text-align: center">
            <tbody id="tableBody">
            {foreach $data2['data'] as $k=>$v}
            <tr>
              <td width="50px">{$k+1}</td>
              <td width="240px">{$v['MO_DOC']}</td>
              <td width="230px">{$v['ITEM_NAME']}</td>
              <td width="270px">{$v['PLAN_START_TIME']}</td>
            </tr>
            {/foreach}
            </tbody>
          </table>
        </div>
      </div>
        <!-- 显示分页 -->
      </div>
      <!--            </table>-->
    </div>
    <div class="main2  " style="width: 51%;border-radius: 25px 25px 0 0;background-color: white">
      <h3 style="background-color: #134094;color:#f1faff;display: inline-block;width: 100%;height: 50px; line-height: 50px;">线体昨日制令单生产情况</h3>
      <div style="display: flex;justify-content:space-between;margin-bottom: 10px">
        <span class="span1 a">生产制令单总数:{$count}</span>
        <span class="span1 b">总产出数量:{$sum}</span>
        <span class="span1 c">昨日整体不良率:{$buHao}%</span>
      </div>
      <table class="table" style="text-align: center" >
        <tr>
          <th>制令单号</th>
          <th>产品型号</th>
          <th>计划数量</th>
          <th>产出数量</th>
          <th>达成率</th>
          <th>不良率</th>
          <th>是否完结</th>
        </tr>
        <tbody id="table3">
        {volist name="$data3" id="val"}
        <tr>
          <td>{$val['MO_DOC']}</td>
          <td>{$val['ITEM_SPEC']}</td>
          <td>{$val['PLAN_QTY']}</td>
          <td>{$val['OUTPUT_QTY']}</td>
          <td>{$val['Reached']}%</td>
          <td>{$val['NG']}%</td>
          {if $val['Is_finish']==1}
          <td>开立</td>
          {elseif $val['Is_finish']==2}
          <td>投产</td>
          {elseif $val['Is_finish']==3}
          <td>关结</td>
          {elseif $val['Is_finish']==4}
          <td>暂停</td>
          {elseif $val['Is_finish']==5}
          <td>强制关结</td>
          {/elseif}
          {/if}
        </tr>
        {/volist}
        </tbody>
      </table>
    </div>
  </div>
</div>

</body>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
  $(".return").click(function (){
    window.history.back();
  })
  //定时刷新
  // 定义定时器，每隔一定时间执行刷新操作
  // var refreshInterval = setInterval(function() {
  //   // location.reload(); // 刷新页面
  //   $.ajax({
  //     url:'zz',
  //     type:'get',
  //     dataType:'json',
  //     success:function (res){
  //       //异步刷新看板数据
  //       //在制信息
  //       var table1=document.getElementById('table1')
  //       table1.innerHTML=''
  //       var html1=''
  //       $.each(res.data,function (i,v){
  //         html1+='<tr><td>'+v.AREA_SN+'</td><td>'+v.MO_DOC+'</td><td>'+v.MODEL_CODE+'</td><td>'+v.ITEM_NAME+'</td><td>'+v.PLAN_QTY+'</td><td>'+v.INPUT_QTY+'</td><td>'+v.OUTPUT_QTY+'</td><td>'+v.AvgNum+'</td><td>'+v.ONLINE_TIME+'</td><td>'+v.PLAN_END_TIME+'</td></tr>'
  //       })
  //       table1.innerHTML=html1
  //       //待生产
  //       var table2=document.getElementById('tableBody')
  //       table2.innerHTML=''
  //       var html2=''
  //       $.each(res.data2,function (i,v){
  //         i+=1
  //         html2+='<tr><td width="50px">'+i+'</td><td width="240">'+v.MO_DOC+'</td><td width="230">'+v.ITEM_NAME+'</td><td width="270">'+v.PLAN_START_TIME+'</td></tr>'
  //       })
  //       table2.innerHTML=html2
  //       //昨日制令单情况
  //       $('.a').text('生产制令单总数:'+res.count)
  //       $('.b').text('总产出数量:'+res.sum)
  //       $('.c').text('昨日整体不良率:'+res.buHao+'%')
  //       var table3=document.getElementById('table3')
  //       table3.innerHTML=''
  //       var html3=''
  //       $.each(res.data3,function (i,v){
  //         if(v.Is_finish==1){
  //           html3+='<tr><td>'+v.MO_DOC+'</td><td>'+v.ITEM_NAME+'</td><td>'+v.PLAN_QTY+'</td><td>'+v.OUTPUT_QTY+'</td><td>'+v.Reached+'%</td><td>'+v.NG+'%</td><td>开立</td></tr>'
  //         }else if(v.Is_finish==2){
  //           html3+='<tr><td>'+v.MO_DOC+'</td><td>'+v.ITEM_NAME+'</td><td>'+v.PLAN_QTY+'</td><td>'+v.OUTPUT_QTY+'</td><td>'+v.Reached+'%</td><td>'+v.NG+'%</td><td>投产</td></tr>'
  //         }else if(v.Is_finish==3){
  //           html3+='<tr><td>'+v.MO_DOC+'</td><td>'+v.ITEM_NAME+'</td><td>'+v.PLAN_QTY+'</td><td>'+v.OUTPUT_QTY+'</td><td>'+v.Reached+'%</td><td>'+v.NG+'%</td><td>关结</td></tr>'
  //         }else if(v.Is_finish==4){
  //           html3+='<tr><td>'+v.MO_DOC+'</td><td>'+v.ITEM_NAME+'</td><td>'+v.PLAN_QTY+'</td><td>'+v.OUTPUT_QTY+'</td><td>'+v.Reached+'%</td><td>'+v.NG+'%</td><td>暂停</td></tr>'
  //         }else if(v.Is_finish==5){
  //           html3+='<tr><td>'+v.MO_DOC+'</td><td>'+v.ITEM_NAME+'</td><td>'+v.PLAN_QTY+'</td><td>'+v.OUTPUT_QTY+'</td><td>'+v.Reached+'%</td><td>'+v.NG+'%</td><td>强制关结</td></tr>'
  //         }
  //       })
  //       table3.innerHTML=html3
  //     },
  //     error:function (){
  //       console.log('网络故障')
  //       location.reload()
  //     }
  //   })
  // }, 20000); // 5000 毫秒（5 秒）间隔
</script>
</html>